﻿<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="Insert Items I" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    
    <AjaxData:DataList ID="DataList1" runat="server" DataKeyField="ID" CssClass="DataWebControlStyle"  AllowDragAndDrop="true"
        ItemDataBoundEvent="onItemDataBound">
       <AlternatingItemStyle CssClass="AlternatingRowStyle" />
       <ItemStyle CssClass="RowStyle" />
       <HeaderStyle CssClass="HeaderStyle" />
       <FooterStyle CssClass="FooterStyle" />
       <HeaderTemplate><h3>Product Information</h3></HeaderTemplate>
        <ItemTemplate>
            <div id="{{ Eval(ID) }}">
            <h4>
                {{ eval(Name) }}
            </h4>
            <table border="0">
                <tr>
                    <td class="ProductPropertyLabel">Category:</td>
                    <td>{{ eval(CategoryName) }}</td>
                    <td class="ProductPropertyLabel">Supplier:</td>
                    <td>{{ eval(SupplierName) }}</td>
                </tr>
                <tr>
                    <td class="ProductPropertyLabel">Qty/Unit:</td>
                    <td>{{ eval(QuantityPerUnit) }}</td>
                    <td class="ProductPropertyLabel">Price:</td>
                    <td>{{ eval(UnitPrice) }}</td>
                </tr>
            </table>
            </div>
        </ItemTemplate>
        <AlternatingItemTemplate>
            <div id="{{ Eval(ID) }}">
            <h4>
                {{ eval(Name) }}
            </h4>
            <table border="0">
                <tr>
                    <td class="ProductPropertyLabel">Category:</td>
                    <td>{{ eval(CategoryName) }}</td>
                    <td class="ProductPropertyLabel">Supplier:</td>
                    <td>{{ eval(SupplierName) }}</td>
                </tr>
                <tr>
                    <td class="ProductPropertyLabel">Qty/Unit:</td>
                    <td>{{ eval(QuantityPerUnit) }}</td>
                    <td class="ProductPropertyLabel">Price:</td>
                    <td>{{ eval(UnitPrice) }}</td>
                </tr>
            </table>
            </div>
        </AlternatingItemTemplate>
        <SeparatorTemplate>
            <hr />
        </SeparatorTemplate>
    </AjaxData:DataList>
    <a href='javascript:void(0);' onclick="insertItem();">Insert New Item</a>
    <script type="text/javascript">

        var _dataList;
        var _id1;
        var _id2;
        
        function pageLoad(sender, e)
        {
            _dataList = DataList1;
            DataService.GetProductList(0, 5, '', '', onLoadSuccess);
        }

        function onLoadSuccess(result)
        {
            _dataList.set_dataSource(result.Rows);
            _dataList.dataBind();
        }
        
        function insertItem()
        {
            _id1 = Math.floor(Math.random() * 9999);
            _id2 = Math.floor(Math.random() * 9999);
            
            var data = new Array();
            
            data[0] = { ID: _id1, Name: "Sonu Kapoor", CategoryName: "IT", SupplierName: "CDW", QuantityPerUnit: 87, UnitPrice:100 };
            data[1] = { ID: _id2, Name: "Xun Ding", CategoryName: "IT", SupplierName: "CDW", QuantityPerUnit: 87, UnitPrice:100 };
            
            _dataList.insertItems(data);
        }

        function onItemDataBound(sender, e)
        {
            var item = e.get_item();
            if (item.get_isDataItemType())
            {
                var dataItem = item.get_dataItem();
                if (typeof _id1 != "undefined" && typeof _id2 != "undefined")
                {
                    var searchForId;
                    if(dataItem.ID == _id1)
                    {
                        searchForId = _id1;
                    }
                    
                    if(dataItem.ID == _id2)
                    {
                        searchForId = _id2;
                    }
                    
                    if (searchForId != null)
                    {
                        var element = item.findControl(new String(searchForId));
                        element.id = searchForId; // change id, because jquery doesnt seem to like the $ created variable names
                        
                        $("#" + searchForId).effect("pulsate", { times: 3 }, 500);
                    }
                }
            }
        }

    </script>
</asp:Content>

